/**
 *  学习目标：Todos 案例
 */
import React, { useEffect, useState } from 'react';
import Footer from './components/Footer';
import Main from './components/Main';
import Header from './components/Header';
import './styles/base.css';
import './styles/index.css';

export default function App() {
  const [type, setType] = useState('全部');
  const filterArr = ['全部', '未完成', '已完成'];

  const [list, setList] = useState([]);

  // 因为代码是从上到下执行，所以按生命周期顺序书写： 先写挂载时，再写更新时
  useEffect(() => {
    setList(
      JSON.parse(localStorage.getItem('todo-list')) || [
        { id: 1, name: '学习vue2', done: true },
        { id: 2, name: '学习vue3', done: true },
        { id: 3, name: '学习react', done: false },
      ]
    );
  }, []);

  useEffect(() => {
    localStorage.setItem('todo-list', JSON.stringify(list));
  }, [list]);

  // 修改状态
  const handleUpdateById = (id) => {
    // 建议要修改时，直接先定义一份新的数据
    const newList = [...list];
    // find 把匹配到的数据返回， findIndex 把匹配到的数据 下标 返回
    const obj = newList.find((item) => item.id === id);
    obj.done = !obj.done;
    setList(newList);
  };

  // 删除
  const handleDelById = (id) => {
    // console.log('id -----> ', id);
    // const newList = list.filter((item) => item.id !== id);
    // setList(newList);
    // 建议一步到位，因为 filter 不会改变原数组，并且返回新数组
    setList(list.filter((item) => item.id !== id));
  };

  // 3. 新增
  const handleAdd = (name) => {
    // console.log('name -----> ', name);
    // 6. 完成新增的计算
    const obj = { id: +new Date(), name, done: false };
    setList([obj, ...list]);
  };

  // 全选
  const handleCheckAll = (e) => {
    console.log('e -----> ', e);
    // 建议要修改时，直接先定义一份新的数据
    const newList = [...list];
    newList.forEach((item) => (item.done = e.target.checked));
    setList(newList);
  };

  // 清理已完成
  const handleClearDone = () => {
    setList(list.filter((item) => !item.done));
  };

  const showList = list.filter((item) => {
    // '未完成'：返回每一项为 false 的即可
    if (type === '未完成') return !item.done;
    // '已完成'：返回每一项为 true 的即可
    if (type === '已完成') return item.done;
    // '全部' 表示全部都符合条件，那么直接返回 true 即可
    return true;
  });

  return (
    <section className="todoapp">
      {/* 头部 */}
      <Header handleAdd={handleAdd} />
      {/* 主体 */}
      <Main
        list={showList}
        handleUpdateById={handleUpdateById}
        handleDelById={handleDelById}
        handleCheckAll={handleCheckAll}
      />
      {/* 底部 */}
      <Footer
        list={list}
        type={type}
        handleSetType={setType}
        handleClearDone={handleClearDone}
        filterArr={filterArr}
      />
    </section>
  );
}
